<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*字体阴影*/
        .one{
            font-size: 90px;
            /*水平偏移量 垂直偏移量 模糊度 颜色*/
            /*text-shadow: 5px 5px 5px red ;*/
            text-shadow: -5px -5px 5px red ,-10px -10px 5px orange;
        }

        .two{
            width: 100px;
            height: 100px;
            margin: 50px;
            border: 1px solid #000;

            border-radius: 50%;

            /* --  水平偏移量 垂直偏移量 模糊度(不设置，默认为0) 外延值 颜色  --*/
            /*box-shadow: 5px 5px red;*/
            /*box-shadow: 5px 5px 5px red;*/
            /*box-shadow: -5px -5px 5px red;*/
            /*这里的两个偏移量设置为0的话，就是四周都有阴影*/
            /*box-shadow: 0px 0px 5px red;*/


            /*外延值*/
            /*box-shadow: 0px 0px 5px 10px red;*/

            /*内置阴影 在外延值的基础上添加 inset就好了*/
            /*box-shadow: 0px 0px 5px 10px red inset;*/

            /*box-shadow 也可以同时设置多重属性*/
            box-shadow: 0px 0px 5px 5px red,
            0px 0px 5px 10px yellow,
            0px 0px 5px 15px blue;




        }



    </style>

</head>
<body>

<div class="one">我是文字阴影</div>
<div class="two">我是盒子阴影</div>


</body>
</html>